<template>
  <div class="newCustomerOrder" :style="{ '--color': `${theme_color}` }">
    <c-title :hide="false" :text="'新客下单'"> </c-title>
    <div class="goodsbox">
      <div class="txt">
        <span class="dt">*</span>
        选择商品
      </div>

      <div class="addGood" @click="addGoodMethod" v-if="goods.length <= 0">
        <div class="addIcon">
          <!-- <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel%2Fcancel%402x.png" alt="" /> -->
          <van-icon name="plus" color="#fff" />
        </div>
        添加商品
      </div>
      <div class="goodList" v-else>
        <div class="left">
          <img :src="chooseGoodArr.thumb" alt="" />
        </div>
        <div class="right">
          <div class="title">{{ chooseGoodArr.title }}</div>
          <div class="right_bottom">
            <div class="right_bottom_l">
              <div class="price">￥{{ chooseGoodArr.price }}</div>
              <div v-if="initNumber(chooseGoodArr.market_price)" class="line_y_price">原价:￥{{ chooseGoodArr.market_price }}</div>
            </div>
            <div class="right_bottom_r" @click="deleteMethod(chooseGoodArr.id)">删除</div>
          </div>
        </div>
      </div>
      <div class="tips">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel%2Fwarring%402x.png" alt="" />
        如有疑问，请<span class="dt" @click.stop="tapKf">联系客服</span>
      </div>
    </div>
    <div class="beforeOrder" v-if="orderSet">
      <div class="txt">您有一笔未支付订单:</div>
      <div class="orderGood" v-if="orderSet.order_goods[0]">
        <img :src="orderSet.order_goods[0].thumb" alt="" />
        <div class="orderGood_lis">
          <div class="title">{{ orderSet.order_goods[0].title }}</div>
          <div class="price">￥{{ orderSet.order_goods[0].price }}</div>
        </div>
        <div class="payBtn" @click="toPay(orderSet.id)">支付</div>
      </div>
    </div>
    <div class="line" style="position: relative;">
      <van-field v-model="nickname" required label="收件人" placeholder="请输入收件人" input-align="right" />
    </div>
    <div class="line" style="position: relative;">
      <van-field v-model="mobile" required label="收货号码" placeholder="请输入收货号码" input-align="right" />
    </div>
    <div class="line" style="position: relative;">
      <van-field v-model="addressName" @click="openAddress" required label="所在地区" readonly input-align="right" right-icon="arrow" />
    </div>
    <div class="line" v-if="strShow">
      <van-field v-model="stree" @click="streetChoose" required label="所在街道" readonly input-align="right" right-icon="arrow" />
    </div>
    <div class="textBox">
      <van-field v-model="detailAddress" type="textarea" placeholder="请输入详细地址"></van-field>
    </div>

    <div class="agreement" v-if="settingInfo.treaty_switch">
      <div class="option" @click="agreementTap">
        <img v-if="!agreement" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/circle@2x.png" alt="" />
        <img v-if="agreement" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/add@2x.png" alt="" />
      </div>
      <div class="txt" @click="agreementTap">
        阅读并同意<span class="dt agreementspan" @click.stop="agreementTap_popup">《{{ popoverProtocolContent_title }}》</span>
      </div>
    </div>
    <div class="orderBox set-pc-styleLeft">
      <div class="total">
        合计：<span class="dt">￥{{ totalPrice }}</span>
      </div>
      <div class="btn" @click="submitOrder">提交订单</div>
    </div>
    <!-- 添加商品弹窗 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '65%' }">
      <div class="goodsBox">
        <div class="searchBox">
          <div class="img" @click="show = false">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/left@2x.png" alt="" />
          </div>
          <van-search style="flex: 1;" v-model="keyword" placeholder="请输入搜索关键词" show-action>
            <div slot="action" class="searchTxt" @click="addGoodMethod">搜索</div>
          </van-search>
        </div>
        <div class="searchBoxtxt">搜索结果</div>
        <div class="listBg">
          <div class="searchList" @click="chooseGood(item)" v-for="(item, index) in listData" :key="index">
            <div class="searchList_l">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="searchList_R">
              <div class="title">{{ item.title }}</div>
              <div class="icon">
                <img v-show="checkSelectGood(item.id)" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/yes@2x.png" alt="" />
              </div>
              <div class="priceLine">
                <span class="pirce dt">￥{{ item.price }}</span>
                <span class="pirce_d" v-if="initNumber(item.market_price)">￥{{ item.market_price }}</span>
              </div>
            </div>
          </div>
          <div class="moreTxt" v-if="page < total_page" @click="addGoodMethodMore">点击加载更多</div>
          <div class="moreTxt" v-else>没有更多了</div>
        </div>
      </div>
    </van-popup>
    <!-- 确认邀请人弹窗 -->
    <van-popup v-model="show1" style="border-radius: 0.25rem;" :close-on-click-overlay="false">
      <div class="invitationCode_box" style="height: 100%;">
        <div class="closeImg"></div>
        <div class="txt">请确认邀请人</div>
        <div class="invitationUser">
          <img :src="Userinfo.referral.avatar" alt="" v-if="Userinfo.referral" />
        </div>
        <div class="txt_name" v-if="Userinfo.referral">{{ Userinfo.referral.nickname }}<span style="margin-left: 0.25rem;">邀请人</span></div>
        <div class="btn">
          <div class="btn_l" @click="edit">修改邀请人</div>
          <div class="btn_r" @click="confirm">进入下单</div>
        </div>
      </div>
    </van-popup>
    <!-- 修改邀请人弹窗 -->
    <van-popup v-model="show2" style="border-radius: 0.25rem;" :close-on-click-overlay="false">
      <div class="invitationCode_box">
        <div class="closeImg">
          <!-- <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/close@2x.png" alt="" /> -->
        </div>
        <div class="txt">请确认邀请码</div>
        <div class="inp">
          <input type="text" v-model="invite_code" placeholder="请输入邀请码" />
        </div>
        <div class="txt stxt" style="margin-top: 0.25rem; margin-bottom: 0.75rem;">输入邀请码即可进行下单！</div>
        <div class="btn">
          <div class="btn_l" @click="edit">返回</div>
          <div class="btn_r" @click="submit">立即下单</div>
        </div>
      </div>
    </van-popup>
    <!-- 客服 -->

    <cservice-popup :value="kefuShow" :url="cservice" :mobile="service_mobile" :qr="service_QRcode" @input="kefuShow = false"></cservice-popup>
    <yd-cityselect style="height: 80%; z-index: 1000000;" v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
    <!-- 街道选择器 s -->
    <van-popup v-model="streetShow" round position="bottom" :style="{ height: '80%' }">
      <div class="m-dialog1">
        <van-nav-bar title="选择街道" class="pcStyle_ydT">
          <template #left>
            <span>
              <van-icon name="arrow-left" size="18" @click.native="streetShow = false" color="#333" />
            </span>
          </template>
        </van-nav-bar>
        <van-cell :border="false" center is-link v-for="(item, i) in districtVal" :key="i" @click.native="streetConfirm(item.areaname)" title-style="text-align:left">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
    <!-- 用协议弹窗-->
    <van-popup v-model="openPlatformAgreement" style="border-radius: 0.656rem;">
      <div class="city-info">
        <van-nav-bar :title="popoverProtocolContent_title" fixed />
        <div style="height: 2.5rem; clear: both;"></div>
        <div id="a_content" v-html="popoverProtocolContent_content"></div>
        <div
          style="width: 12.75rem;
            height: 2.313rem;
            background-color: #f04d4d;
            border-radius: 0.188rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.193rem;
            margin: 0 auto;
            margin-top: 1.5rem;
            margin-bottom: 1.063rem;"
          @click="openPlatformAgreement = false"
        >
          确定
        </div>
      </div>
    </van-popup>

    <!-- <van-popup v-model="kefuShow" style="border-radius: 0.5rem;">
      <div class="kefuBox">
        <div class="closeImg" @click="kefuShow = false">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/close@2x.png" alt="" />
        </div>
        <div class="txt">扫码联系客服</div>
        <div class="code">
          <img :src="service_QRcode" alt="" />
        </div>
        <div class="btn">
          <div class="btn_l btn_f_j_c" style="color: #F15353;" @click="cserviceTap">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/msg@2x.png" alt="" />
            在线沟通
          </div>
          <div class="btn_r btn_f_j_c" style="color: #3B3B4A;" @click="tell">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FlevelCompel/kf@2x.png" alt="" />
            电话联系
          </div>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
import cservicePopup from "../../../components/ui_components/yz_service";
export default {
  components: { cservicePopup },
  data() {
    return {
      // 添加商品
      show: false,
      // 邀请码确认
      show1: false,
      show2: false,
      // 客服弹窗显隐
      kefuShow: false,
      // 协议开关
      agreement: false,
      // 地址弹窗
      addressShow: false,
      district: district, // 地址本地数据
      // 街道选择弹窗
      streetShow: false,
      // 街道显隐
      strShow: false,
      addressName: "",
      stree: "",
      Userinfo: {},
      // 邀请码
      invite_code: "",
      // 新客下单设置
      settingInfo: {},
      // 客服
      cservice: "",
      service_mobile: "",
      service_QRcode: "",
      goods: [],
      nickname: "",
      mobile: "",
      detailAddress: "",
      openPlatformAgreement: false,
      popoverProtocolContent_title: "用户协议",
      popoverProtocolContent_content: "",
      province: "",
      city: "",
      district_q: "",
      theme_color: "",
      chooseGoodArr: "",
      orderSet: [],

      page: 1,
      isLoadMore: true,
      total_page: 0,
      keyword: "",
      listData: []
    };
  },
  activated() {
    this.fun.setWXTitle("新客下单");
    this.theme_color = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color;
    this.getUserinfo();
    this.getData();
  },
  computed: {
    initNumber(market_price) {
      return function(market_price) {
        return Number(market_price);
      };
    },
    checkSelectGood(gid) {
      return function(gid) {
        for (let i = 0; i < this.goods.length; i++) {
          if (this.goods[i].goods_id == gid) {
            return true;
          }
        }
      };
    },
    totalPrice() {
      let num = 0;
      let arr = [];
      let goods = this.goods;
      for (let i = 0; i < goods.length; i++) {
        for (let j = 0; j < this.listData.length; j++) {
          if (goods[i].goods_id == this.listData[j].id) {
            arr.push(this.listData[j]);
          }
        }
      }
      console.log(arr);
      arr.forEach(element => {
        num += Number(element.price);
      });
      return num;
    }
  },
  methods: {
    toPay(id) {
      this.$router.replace(this.fun.getUrl("orderpay", {order_ids:id}));
    },
    deleteMethod(id) {
      this.goods = [];
      this.chooseGoodArr = "";
    },
    getUserinfo() {
      $http.get("member.member.getUserInfo", {}, "加载中...").then(res => {
        if (res.result === 1) {
          this.Userinfo = res.data;
        }
      });
    },
    // 修改邀请人弹窗开关
    edit() {
      if (this.show1) {
        this.show1 = false;
        this.show2 = true;
      } else {
        this.show1 = true;
        this.show2 = false;
      }
    },
    // 立即下单（确认邀请人）
    confirm() {
      $http.get("member.member.update-member-invite", { parent_id: this.Userinfo.yz_member.parent_id }).then(res => {
        if (res.result === 1) {
          this.show1 = false;
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    submit() {
      if (this.fun.isTextEmpty(this.invite_code)) {
        this.$toast({
          message: "请输入邀请码",
          duration: 1500
        });
        return;
      }
      $http.get("member.member.refuseGoods", { invite_code: this.invite_code }).then(
        response => {
          if (response.result === 1) {
            this.show2 = false;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        response => {
          this.$dialog.alert({ message: response.msg });
        }
      );
    },
    agreementTap() {
      this.agreement = !this.agreement;
    },
    agreementTap_popup() {
      this.openPlatformAgreement = true;
    },
    // 提交订单
    submitOrder() {
      if (this.goods.length <= 0) {
        this.$toast({
          message: "请选择下单商品"
        });
        return;
      }
      if (this.settingInfo.treaty_switch && !this.agreement) {
        this.$toast({
          message: "请勾选用户协议"
        });
        return;
      }
      if (this.fun.isTextEmpty(this.nickname)) {
        this.$toast({
          message: "请输入收件人姓名"
        });
        return;
      }
      if (this.fun.isTextEmpty(this.mobile)) {
        this.$toast({
          message: "请输入收货号码"
        });
        return;
      }
      if (this.fun.isTextEmpty(this.addressName)) {
        this.$toast({
          message: "请选择所在地区"
        });
        return;
      }
      if (this.strShow) {
        if (this.fun.isTextEmpty(this.stree)) {
          this.$toast({
            message: "请选择所在街道"
          });
          return;
        }
      }

      if (this.fun.isTextEmpty(this.detailAddress)) {
        this.$toast({
          message: "请输入详细地址"
        });
        return;
      }
      let currentAddress = {
        province: this.province,
        city: this.city,
        district: this.district_q,
        street: this.stree,
        address: this.detailAddress,
        mobile: this.mobile,
        username: this.nickname
      };
      let json = {
        address: encodeURIComponent(JSON.stringify(currentAddress)),
        dispatch_type_id: 1,
        goods: JSON.stringify(this.goods),
        member_coupon_ids: "",
        orders: ""
      };
      // console.log(json); //order.create
      $http.get("order.create", json).then(res => {
        if (res.result === 1) {
          let orderJson = {
            status: "2",
            order_ids: res.data.order_ids
          };
          this.$router.replace(this.fun.getUrl("orderpay", orderJson));
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    chooseGood(item) {
      if (this.goods.length > 0) {
        this.goods = [];
      }
      let goodInfo = {
        goods_id: item.id,
        total: 1,
        option_id: 0
      };
      this.goods.push(goodInfo);
      this.chooseGoodArr = item;
    },
    openAddress() {
      this.addressShow = true;
    },
    streetConfirm(name) {
      this.stree = name;
      this.streetShow = false;
    },
    addressCallback(obj) {
      console.log(obj);
      // this.form.street = "";
      // this.districtVal = "";
      this.addressName = obj.itemName1 + " " + obj.itemName2 + " " + obj.itemName3;
      this.province = obj.itemName1;
      this.city = obj.itemName2;
      this.district_q = obj.itemName3;
      this.getStreet(obj.itemValue3);
    },
    streetChoose() {
      this.streetShow = true;
    },
    tell() {
      window.location.href = this.service_mobile;
    },
    cserviceTap() {
      window.location.href = this.cservice;
    },
    tapKf() {
      let setServicePlugin = this.fun.isTextEmpty(this.service_mobile) && this.fun.isTextEmpty(this.service_QRcode);
      console.log(setServicePlugin, this.cservice);
      if (!this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        //只设置了客服链接，直接跳转
        if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
          window.location.href = this.cservice;
        } else {
          window.location.href = this.cservice;
        }
        return;
      }
      this.kefuShow = true;
    },
    addGoddInit() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.listData = [];
    },
    addGoodMethod() {
      this.addGoddInit();
      $http.get("plugin.level-compel.frontend.controllers.goods.index", { keyword: this.keyword, page: this.page }, "加载中...").then(res => {
        if (res.result === 1) {
          console.log(res.data);
          this.isLoadMore = true;
          this.total_page = res.data.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
          this.listData = res.data.data;
          this.show = true;
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    addGoodMethodMore() {
      if (this.page >= this.total_page) {
        return;
      }
      this.page = this.page + 1;
      $http.get("plugin.level-compel.frontend.controllers.goods.index", { keyword: this.keyword, page: this.page }, "加载中...").then(res => {
        if (res.result === 1) {
          console.log(res.data);
          this.isLoadMore = true;
          this.listData = this.listData.concat(res.data.data);
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    // 获取协议
    getData() {
      $http.get("plugin.level-compel.frontend.controllers.page.index", {}, "加载中...").then(res => {
        if (res.result === 1) {
          console.log(res.data);
          this.settingInfo = res.data;
          this.orderSet = res.data.order;
          this.cservice = res.data.customer_service.cservice;
          this.service_mobile = res.data.customer_service.service_mobile ? res.data.customer_service.service_mobile : "";
          this.service_QRcode = res.data.customer_service.service_QRcode ? res.data.customer_service.service_QRcode : "";
          if (res.data.is_inviter == 0) {
            this.show1 = true;
          }
          this.agreement = res.data.treaty_tick;
          this.popoverProtocolContent_title = res.data.treaty_title;
          this.popoverProtocolContent_content = res.data.treaty_content;
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    // 获取街道
    getStreet(param, key = "") {
      this.district_id = param;
      $http
        .get(
          "member.memberAddress.street",
          {
            district_id: param
          },
          "加载中"
        )
        .then(response => {
          if (response.result === 1 && !this.fun.isTextEmpty(response.data)) {
            if (!this.fun.isTextEmpty(response.data) && response.data.length > 0) {
              this.districtVal = response.data;
              this.strShow = true;
              if (key) {
                this.form.street = key;
              }
            } else {
              this.strShow = false;
            }
          } else {
            this.strShow = false;
          }
        })
        .catch(error => {
          this.strShow = false;
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.newCustomerOrder {
  min-height: 100vh;
  padding-bottom: 4rem;
}

.dt {
  color: #f15353;
}

.textBox {
  height: 6.75rem;
  background: #fff;

  .van-cell {
    height: 100%;
    padding-top: 1.19rem;
  }
}

.line {
  height: 3.38rem;

  .van-cell {
    height: 100%;
    padding: 0 16px;
    line-height: 3.38rem;
  }
}

.invitationCode_box {
  width: 17.5rem;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

  .invitationUser {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 100%;

    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .txt_name {
    font-size: 0.94rem;
    margin-bottom: 0.75rem;
    text-align: center;

    span {
      color: #888;
    }
  }

  .inp {
    margin-top: 0.75rem;

    input {
      width: 13.97rem;
      height: 2.31rem;
      border: 1.0016px solid #e7e7e7;
      text-indent: 0.47rem;
    }
  }

  .closeImg {
    display: flex;
    justify-content: flex-end;
    margin: 0.75rem 0.75rem 0 0.75rem;

    img {
      width: 0.75rem;
      height: 0.75rem;
      margin: 0;
    }
  }

  .txt {
    font-size: 1.13rem;
    font-weight: 400;
    color: #000;
  }

  .stxt {
    font-size: 0.75rem;
    color: #f15353;
    width: 13.97rem;
    text-align: left;
    margin: 0 auto;
  }

  .btn {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    border-top: 1.0016px solid #e7e7e7;

    .btn_l {
      flex: 1;
      font-size: 1.13rem;
      color: #999;
      border-right: 1.0016px solid #e7e7e7;
      line-height: 3rem;
    }

    .btn_r {
      flex: 1;
      font-size: 1.13rem;
      color: #f15353;
      line-height: 3rem;
    }
  }
}

.btn_f_j_c {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 1rem;
    height: 1rem;
    margin: 0;
    margin-right: 0.25rem;
  }
}

.goodsBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
}

.searchBoxtxt {
  font-size: 0.94rem;
  color: #aaaab3;
  line-height: 1.59rem;
}

.listBg {
  flex: 1;
  overflow-y: scroll;

  .moreTxt {
    padding: 2rem 0;
    color: #999;
  }
}

.searchList {
  margin: 0 0.75rem;
  border-bottom: 1.0016px solid #ececec;
  display: flex;
  padding: 0.75rem 0;

  .searchList_R {
    flex: 1;
    overflow: hidden;

    .title {
      font-size: 1rem;
      font-weight: 500;
      color: #00001c;
      line-height: 1.69rem;
      text-align: left;
    }

    .priceLine {
      overflow: hidden;
      text-align: left;
      display: flex;
      justify-content: flex-start;

      .pirce {
        font-size: 1rem;
        font-weight: 400;
      }

      .pirce_d {
        font-size: 0.75rem;
        font-weight: 400;
        color: #c2c2c2;
      }
    }

    .icon {
      display: flex;
      justify-content: flex-end;
      height: 1rem;

      img {
        width: 1rem;
        height: 1rem;
        margin: 0;
      }
    }
  }

  .searchList_l {
    margin-right: 0.38rem;
    width: 4.38rem;
    height: 4.38rem;
    border-radius: 0.31rem;
    background: #999;

    img {
      width: 100%;
      height: 100%;
      border-radius: 0.31rem;
    }
  }
}

.searchList:last-child {
  border: none;
}

.searchBox {
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  padding-right: 0.81rem;

  .img {
    width: 1rem;
    height: 1rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .searchTxt {
    font-size: 0.94rem;
    font-weight: 600;
    color: #333;
  }
}

.orderBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #fff;
  width: 100%;

  .total {
    font-size: 0.88rem;
    color: #999;
    font-weight: 400;
  }

  .btn {
    background: #f15353;
    border-radius: 1.28rem;
    padding: 0.41rem 1.81rem;
    font-size: 0.88rem;
    font-weight: 400;
    color: #fff;
    margin-left: 1.25rem;
  }
}

.line::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  bottom: 0;
  width: 21.94rem;
  height: 1.0016px;
  background: #e7e7e7;
}

.agreement {
  background: #fff;
  margin: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 1rem;

  .option {
    display: flex;
    align-items: center;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 100%;
    margin-right: 0.5rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .txt {
    color: #aaaab3;
    font-size: 0.75rem;
  }

  .agreementspan {
    color: var(--color);
  }
}

.goodsbox {
  padding: 1.19rem 0.75rem;
  background: #fff;

  .txt {
    display: flex;
    font-size: 1rem;
  }

  .tips {
    display: flex;
    align-items: center;
    color: #aaaab3;

    img {
      margin: 0;
      width: 0.75rem;
      height: 0.75rem;
      margin-right: 0.25rem;
    }
  }

  .goodList {
    margin: 1.19rem 0;
    display: flex;
    justify-content: space-between;

    .right {
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 1rem;
        font-weight: 500;
        color: #00001c;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .right_bottom {
        flex: 1;
        display: flex;

        .right_bottom_l {
          text-align: left;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .price {
            color: #f15353;
            font-size: 1rem;
          }

          .y_price {
            font-size: 0.75rem;
            color: #c2c2c2;
            font-weight: 400;
          }

          .line_y_price {
            text-decoration: line-through;
            font-size: 0.75rem;
            color: #c2c2c2;
            font-weight: 400;
          }
        }

        .right_bottom_r {
          width: 4.69rem;
          height: 1.5rem;
          border: 0.0313rem solid #fe5e56;
          text-align: center;
          color: #fe5e56;
          border-radius: 1.09rem;
          line-height: 1.4rem;
        }
      }
    }

    .left {
      flex-shrink: 0;
      margin-right: 0.38rem;
      width: 4.38rem;
      height: 4.38rem;
      background: rgba(0, 0, 0, 0);
      border-radius: 0.31rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
    }
  }

  .addGood {
    margin: 1.19rem auto;
    width: 5.75rem;
    height: 1.66rem;
    border: 1.0016px solid var(--color);
    border-radius: 1.13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    color: var(--color);

    .addIcon {
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.13rem;
      background: var(--color);
      // img {
      //   width: 100%;
      //   height: 100%;
      // }
    }
  }
}

.kefuBox {
  width: 17.5rem;
  background: rgba(255, 255, 255, 0.39);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

  .closeImg {
    display: flex;
    justify-content: flex-end;
    margin: 0.75rem 0.75rem 0 0.75rem;

    img {
      width: 0.75rem;
      height: 0.75rem;
      margin: 0;
    }
  }

  .code {
    margin: 0 auto;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    margin-bottom: 1.5rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .txt {
    font-size: 1rem;
    color: #3b3b4a;
    margin-bottom: 1.5rem;
  }

  .btn {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    border-top: 1.0016px solid #e7e7e7;

    .btn_l {
      flex: 1;
      font-size: 1.13rem;
      color: #999;
      border-right: 1.0016px solid #e7e7e7;
      line-height: 3rem;
    }

    .btn_r {
      flex: 1;
      font-size: 1.13rem;
      color: #f15353;
      line-height: 3rem;
    }
  }
}

.city-info {
  border-radius: 0.656rem;
  width: 20rem;
  height: 32rem;
  margin: 0 auto;
  // padding-bottom: 5rem;
  background: #fff;

  header {
    border-radius: 0.656rem 0.656rem 0 0;
  }

  #a_content {
    // width: 14.438rem;
    margin: 0.5rem 0.9rem;
    height: 24rem;
    overflow-y: scroll;

    ::v-deep img {
      max-width: 100%;
      display: flex;
    }
  }
}

.lineBg {
  width: 100%;
  height: 4rem;
}

.beforeOrder {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  background: #fff;

  .txt {
    color: #f15353;
    text-align: left;
  }

  .orderGood {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;

    img {
      margin: 0;
      margin-right: 0.38rem;
      width: 4.38rem;
      height: 4.38rem;
      border-radius: 0.325rem;
    }

    .orderGood_lis {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;

      .title {
        width: 100%;
        margin-bottom: 1.5rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: #999;
      }
    }

    .payBtn {
      background: #f15353;
      border-radius: 0.625rem;
      color: #fff;
      padding: 0.325rem 0.625rem;
    }
  }
}
</style>
